<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WebSocket Client</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }

        #messageContainer {
            border: 1px solid #ccc;
            height: 300px;
            overflow-y: scroll;
            padding: 10px;
            margin-bottom: 10px;
        }

        #messageContainer div {
            margin-bottom: 5px;
        }

        #controls {
            display: flex;
            gap: 10px;
        }

        #controls input, #controls button {
            padding: 5px;
        }
    </style>
</head>
<body>
<h1>WebSocket Client（IM消息服务）</h1>
<div id="messageContainer"></div>
<div id="controls">
    <input type="text" id="serverAddress"  value="ws://localhost:9998/api/websocket/us1" placeholder="ws://localhost:9999/websocket" style="width:250px;">
    <button id="connectBtn">连接</button>
    <input type="text" id="messageInput" placeholder="消息数据" style="width:500px;">
    <button id="sendBtn">发送</button>
</div>
<h3>1、设置连接地址：ws://localhost:9999/websocket/us1
    <br/>
    2、发送登录消息：{"type":9,"dataContent":"{\"loginUserId\":\"lijl\"}"}
    <br/>
    3、发送测试数据：{"type": 2,"dataContent": "{\"toUsers\": [\"us2\"],  \"content\": {\"MessageLevel\":0,\"MessageType\":2,\"MessageContent\":\"测试消息\",\"MessageID\":\"000000001\"}}"}
</h3>
<script>
    let socket;
    let heartbeatInterval;
    const messageContainer = document.getElementById('messageContainer');
    const connectBtn = document.getElementById('connectBtn');
    const sendBtn = document.getElementById('sendBtn');
    const serverAddressInput = document.getElementById('serverAddress');
    const messageInput = document.getElementById('messageInput');

    connectBtn.addEventListener('click', () => {
        const serverAddress = serverAddressInput.value;
        if (serverAddress) {
            connect(serverAddress);
        } else {
            alert('请设置服务地址!');
        }
    });

    sendBtn.addEventListener('click', () => {
        const message = messageInput.value;
        if (message && socket && socket.readyState === WebSocket.OPEN) {
            socket.send(message);
            logMessage(`Sent: ${message}`);
            messageInput.value = '';
        } else {
            alert('无法连接!');
        }
    });

    function connect(serverAddress) {
        socket = new WebSocket(serverAddress);

        socket.onopen = () => {
            logMessage('连接成功=>'+serverAddressInput.value);
            //startHeartbeat();
        };

        socket.onmessage = (event) => {
            logMessage(`Received: ${event.data}`);
        };

        socket.onerror = (error) => {
            logMessage(`Error: ${error.message}`);
        };

        socket.onclose = () => {
            logMessage('连接断开=>'+serverAddressInput.value);
            //stopHeartbeat();
        };
    }

    function logMessage(message) {
        const messageElement = document.createElement('div');
        messageElement.textContent = message;
        messageContainer.appendChild(messageElement);
        messageContainer.scrollTop = messageContainer.scrollHeight;
    }

    function startHeartbeat() {
        heartbeatInterval = setInterval(() => {
            if (socket && socket.readyState === WebSocket.OPEN) {
                socket.send('{"type":1}');
                logMessage('Sent: heartbeat');
            }
        }, 5000); // Send heartbeat every 5 seconds
    }

    function stopHeartbeat() {
        clearInterval(heartbeatInterval);
    }

</script>
</body>
</html>
